<template>
  <view class="search-component">
    <view class="search-box">
      <image class="search-icon" src="/static/icons/search.png" mode="aspectFit" />
      <input
        class="search-input"
        type="text"
        v-model="searchText"
        placeholder="搜索"
        @focus="onFocus"
        @input="onInput"
      />
      <image
        v-if="searchText"
        class="clear-icon"
        src="/static/icons/clear.png"
        mode="aspectFit"
        @tap="clearSearch"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'CommonSearch',
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    onFocus() {
      this.$emit('focus')
    },
    onInput() {
      this.$emit('input', this.searchText)
    },
    clearSearch() {
      this.searchText = ''
      this.$emit('input', '')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-component {
  padding: 8px 12px;
  background-color: #f7f7f7;
  
  .search-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 6px 12px;
    
    .search-icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    
    .search-input {
      flex: 1;
      height: 20px;
      font-size: 14px;
      color: #333;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .clear-icon {
      width: 16px;
      height: 16px;
      padding: 2px;
    }
  }
}
</style> 